<!--预览赚钱分享社区-->
<template>
	<view class="revForum_page clearfix">
		<view class="rel_wrap clearfix">
			<view class="title">{{relData.releaseTitle}}</view>
			<view class="userInfo">
				<view class="img_wrap_user">
					<image class="img" mode="aspectFit" :src="relData.appIcon"></image>
				</view>
				<view class="tips">
					<view class="userName">{{relData.releaseName}}</view>
					<view class="info">
						<text>更新于{{relData.front}}</text>
						<text>{{relData.browseNum}}浏览</text>
					</view>
				</view>
			</view>
			<textarea maxlength="-1" auto-height class="rel_main" v-model="relData.content" disabled>
			</textarea>
		</view>
		<view class="img_wrap clearfix" v-if="imgLength">
			<view class="item" v-for="(item,index) in relData.forumAccessoryVoList" :key="index" :data-url="item.url"
				@click="showImgList">
				<image class="img" mode="widthFix" :src="item.url"></image>
			</view>
		</view>
		<view class="img_wrapT" v-else>
			<view class="item" v-for="(item,index) in relData.forumAccessoryVoList" :key="index" :data-url="item.url"
				@click="showImgList">
				<image class="img" mode="aspectFill" :src="item.url"></image>
			</view>
		</view>
		<view class="rel_bot flex-space ">
			<view class="flex-center download-attachment" @click="openLayer">
				<image src="../../static/image/page/download-icon.png" class="drop-down-icon"></image>
				<text>下载本文章相关附件</text>
			</view>
			<view>发布于{{relData.front}}</view>

		</view>
		<!--start 底部悬浮评论-->
		<!-- <discussFixed v-if="relData.id" :forumId="relData.id" :isPraise="relData.isPraise" :replyNum="relData.replyNum" 
			:praiseNum="relData.praiseNum" :tieType="0"></discussFixed> -->
		<comment v-if="relData.id" :detail="relData" :type="0"></comment>

		<van-popup round :show=" show ">
			<view class="content">
				<view class="xx-icon-box" @click="close">
					<image src="../../static/image/page/xx-icon.png" class="xx-icon"></image>
				</view>
				<view class="fj-list-box">
					<view class="fj-list flex-align" v-for="(item,index) in detail.forumAccessoryVoList" :key="index"
						v-if="item.fileType==1">
						<image src="../../static/image/page/file-icon.png" class="file-icon"></image>
						<view class="fj-content">
							<view class="fj-title">{{item.showName}}</view>
							<view class="flex-space">
								<text class="size">{{item.size}}MB</text>
								<view class="zx-btn" @click="dowload" :data-path="item.url">下载</view>
							</view>
						</view>

					</view>
				</view>
				<view class="fj-tips">本资料由网友分享上传，如有侵权联系我们</view>
				<image class="ye-banner" src="../../static/image/page/yepage.png"></image>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import comment from '@/components/comment1/index.vue'
	export default {
		components: {
			comment
		},
		data() {
			return {
				imgWdith: "",
				relData: {},
				detail: {},
				show: false,
			};
		},
		onLoad(option) {
			this.getForum(option.id)
			let res = wx.getSystemInfoSync()
			this.imgWdith = parseInt((res.screenWidth - 108) / 1.5);
		},
		computed: {
			imgLength: function() {
				return this.relData.forumAccessoryVoList ?
					(this.relData.forumAccessoryVoList.length >= 3 ? true : false) : false;
			}
		},
		methods: {
			 dowload(e) {
			    let path = e.currentTarget.dataset.path;
			    console.log(path)
			    uni.downloadFile({
			      url: path, //仅为示例，并非真实的资源
			      success(res) {
			        // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
			        if (res.statusCode === 200) {
			          uni.openDocument({
			            filePath: res.tempFilePath,
			            success: function (res) {
			              console.log('打开文档成功')
			            }
			          })
			        } else {
			          uni.showToast({
			            icon: 'none',
			            title: res.statusCode,
			          })
			        }
			      }
			    })
			  },
			  //打开弹层
			  openLayer() {
			   this.show= true
			   
			  },
			  //关闭弹层
			  close() {
			      this.show= false
			    
			  },
			  //获取详情
			  getCommunityDetail() {
			    this.$api.getCommunityDetail(this.id).then(res => {
			        this.detail= res.data.data
			    })
			  },
			//获取文章详情
			async getForum(id) {
				let resdata = await this.$api.getForumDetail(id)
				let resData = resdata.data.data;
				this.relData = resData;
			},
			//展示图片
			showImgList(e) {
				let urlList = [];
				this.relData.forumAccessoryVoList.map(item => {
					urlList.push(item.url)
					return item
				})
				uni.previewImage({
					urls: urlList,
					indicator: "default",
					current: e.target.dataset.url || e.currentTarget.dataset.url
				})
			},
		}
	}
</script>
<style>
	page {
		background: #F8F8F8;
		padding-bottom: 100rpx;
	}
</style>
<style lang="scss">
	.rel_wrap {
		padding: 0 30rpx;
		background: #FFFFFF;

		.title {
			font-size: 38rpx;
			color: #333333;
			font-weight: bold;
			margin: 30rpx 0;
		}

		.userInfo {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			.img_wrap_user {
				height: 80rpx;
				width: 80rpx;
				border-radius: 50%;
				overflow: hidden;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.tips {
				flex: 1;
				padding-left: 20rpx;

				.userName {
					font-weight: bold;
					font-size: 30rpx;
					color: #333333;
				}

				.info {
					color: #999999;
					font-size: 22rpx;

					text {
						margin-right: 20rpx;
					}
				}
			}
		}

		.rel_main {
			width: 100%;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.img_wrap {
		padding: 10rpx 30rpx 0 30rpx;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin-top: 20rpx;
		background: #FFFFFF;

		.item {
			// margin-right: 24rpx;
			width: 100%;
			margin-bottom: 30rpx;
			border-radius: 6rpx;
			overflow: hidden;
		}

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.img_wrap:after {
		content: "";
		flex: auto
	}

	.img_wrapT {
		padding: 20rpx 30rpx;
		overflow: hidden;
		background: #FFFFFF;

		.item {
			width: 100%;
			height: 360rpx;
			margin-bottom: 20rpx;
		}

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.rel_bot {
		padding: 0 30rpx 40rpx;
		font-size: 28rpx;
		color: #999999;
		background: #FFFFFF;
		margin-bottom: 20rpx;
	}

	.drop-down-icon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 5rpx;
	}

	.download-attachment {
		height: 60rpx;
		background: #585CF7;
		border-radius: 30rpx;
		padding: 0 20rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		margin-top: 20rpx;
	}
	.content {
	  padding: 30rpx 30rpx 45rpx;
	  width: 690rpx;
	}
	
	.xx-icon {
	  width: 28rpx;
	  height: 28rpx;
	}
	
	.xx-icon-box {
	  text-align: right;
	  margin-bottom: 33rpx;
	}
	
	.fj-list-box {
	  max-height: 500rpx;
	  overflow: auto;
	}
	
	.fj-list {
	  width: 100%;
	  height: 120rpx;
	  background: #F6F4FC;
	  border-radius: 10rpx;
	  padding: 0 30rpx;
	  margin-bottom: 20rpx;
	}
	
	.file-icon {
	  width: 62rpx;
	  height: 50rpx;
	  margin-right: 28rpx;
	}
	
	.fj-content {
	  flex: 1;
	}
	
	.fj-title {
	  font-size: 28rpx;
	  font-weight: bold;
	  color: #333333;
	}
	
	.size {
	  font-size: 24rpx;
	  color: #999999;
	}
	
	.zx-btn {
	  width: 80rpx;
	  height: 40rpx;
	  background: #EEEEFE;
	  border: 1rpx solid #585CF7;
	  border-radius: 10rpx;
	  font-size: 24rpx;
	  color: #585CF7;
	  line-height: 40rpx;
	  text-align: center;
	}
	
	.fj-tips {
	  font-size: 24rpx;
	  color: #999999;
	  text-align: center;
	  margin-bottom: 30rpx;
	  margin-top: 30rpx;
	}
	
	.ye-banner {
	  height: 140rpx;
	  border-radius: 10rpx;
	  width: 100%;
	}
</style>
